<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>心理咨询 - 教育新闻网</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap-icons.css" rel="stylesheet">
    <style>
        .consult-list {
            margin: 30px 0;
        }
        .consult-item {
            padding: 25px;
            margin-bottom: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,.05);
            transition: all 0.3s;
        }
        .consult-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,.1);
        }
        .consult-title {
            color: #333;
            font-size: 20px;
            margin-bottom: 15px;
            text-decoration: none;
            font-weight: 500;
        }
        .consult-title:hover {
            color: #0d6efd;
        }
        .consult-meta {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
        }
        .consult-meta span {
            margin-right: 20px;
        }
        .consult-content {
            color: #666;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        .consult-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        .consult-status {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
        }
        .status-new {
            background: #e8f5e9;
            color: #2e7d32;
        }
        .status-replied {
            background: #e3f2fd;
            color: #1565c0;
        }
        .pagination {
            margin-top: 30px;
            justify-content: center;
        }
        .welcome-section {
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin-bottom: 30px;
        }
        .stats-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,.05);
        }
        .stats-number {
            font-size: 24px;
            font-weight: bold;
            color: #0d6efd;
        }
        .stats-label {
            color: #666;
            margin-top: 5px;
        }
        #addConsultModal .modal-body {
            padding: 25px;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 引入头部 -->
    <jsp:include page="/user/common/header.jsp"/>
    
    <div class="container">
        <!-- 欢迎区域 -->
        <div class="welcome-section">
            <h2>心理咨询服务</h2>
            <p class="mb-0">这里是您的私密空间，所有咨询内容都将得到严格保密。我们有专业的心理咨询师为您解答困惑。</p>
        </div>

        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-number">${totalCount}</div>
                    <div class="stats-label">咨询总数</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-number">${repliedCount}</div>
                    <div class="stats-label">已回复咨询</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-number">${waitingCount}</div>
                    <div class="stats-label">等待回复</div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3>我的咨询记录</h3>
            <button class="btn btn-primary" onclick="showAddConsultModal()">
                <i class="bi bi-plus-lg"></i> 发起咨询
            </button>
        </div>
        
        <div class="consult-list">
            <c:forEach items="${consultList}" var="consult">
                <div class="consult-item">
                    <a href="${pageContext.request.contextPath}/user/consult/detail?id=${consult.post_id}" class="consult-title">
                        ${consult.title}
                    </a>
                    <div class="consult-meta">
                        <span><i class="bi bi-clock"></i> <fmt:formatDate value="${consult.create_time}" pattern="yyyy-MM-dd HH:mm"/></span>
                        <span><i class="bi bi-chat-dots"></i> ${consult.reply_count}条回复</span>
                        <span><i class="bi bi-eye"></i> ${consult.view_count}次浏览</span>
                    </div>
                    <div class="consult-content">
                        ${consult.content}
                    </div>
                    <div class="consult-footer">
                        <span class="badge ${consult.reply_count > 0 ? 'bg-success' : 'bg-warning'}">
                            ${consult.reply_count > 0 ? '已回复' : '待回复'}
                        </span>
                        <a href="${pageContext.request.contextPath}/user/consult/detail?id=${consult.post_id}" class="btn btn-outline-primary btn-sm">
                            查看详情
                        </a>
                    </div>
                </div>
            </c:forEach>

            <c:if test="${empty consultList}">
                <div class="text-center py-5">

                    <p class="text-muted mt-3">暂无咨询记录，点击右上角发起咨询</p>
                </div>
            </c:if>
        </div>
        
        <!-- 分页 -->
        <c:if test="${totalPages > 1}">
            <nav>
                <ul class="pagination">
                    <li class="page-item ${currentPage == 1 ? 'disabled' : ''}">
                        <a class="page-link" href="${pageContext.request.contextPath}/user/consult?page=${currentPage - 1}">上一页</a>
                    </li>
                    
                    <c:forEach begin="1" end="${totalPages}" var="i">
                        <li class="page-item ${currentPage == i ? 'active' : ''}">
                            <a class="page-link" href="${pageContext.request.contextPath}/user/consult?page=${i}">${i}</a>
                        </li>
                    </c:forEach>
                    
                    <li class="page-item ${currentPage == totalPages ? 'disabled' : ''}">
                        <a class="page-link" href="${pageContext.request.contextPath}/user/consult?page=${currentPage + 1}">下一页</a>
                    </li>
                </ul>
            </nav>
        </c:if>
    </div>
    
    <!-- 发起咨询模态框 -->
    <div class="modal fade" id="addConsultModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">发起心理咨询</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addConsultForm">
                        <div class="mb-3">
                            <label class="form-label">咨询主题</label>
                            <input type="text" class="form-control" name="title" required 
                                placeholder="请简要描述您的困扰">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">详细描述</label>
                            <textarea class="form-control" name="content" rows="6" required
                                placeholder="请详细描述您的问题，这将帮助我们更好地了解和帮助您"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitConsult()">发布咨询</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入底部 -->
    <jsp:include page="/user/common/footer.jsp"/>
    
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
    <script>
        let addConsultModal;
        
        // 页面加载完成后初始化模态框
        document.addEventListener('DOMContentLoaded', function() {
            addConsultModal = new bootstrap.Modal(document.getElementById('addConsultModal'));
        });
        
        // 显示发起咨询模态框
        function showAddConsultModal() {
            <c:choose>
                <c:when test="${empty sessionScope.user}">
                    alert('请先登录后再发起咨询');
                    window.location.href = '${pageContext.request.contextPath}/user/login.jsp';
                </c:when>
                <c:otherwise>
                    addConsultModal.show();
                </c:otherwise>
            </c:choose>
        }
        
        // 提交咨询
        function submitConsult() {
            const form = document.getElementById('addConsultForm');
            const formData = new FormData(form);
            
            fetch('${pageContext.request.contextPath}/user/consult/add', {
                method: 'POST',
                body: new URLSearchParams(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('发布失败，请稍后重试');
            });
        }
    </script>
</body>
</html> 